import { defineComponent, ref } from 'vue'
import './index.less'

const themes = [
	['#7dd09a', '#1e6140'],
	['#ccaac6', '#80365f'],
	['#d6bb8b', '#8e7439'],
	['#5bd5fa', '#446c9e'],
	['#d193ff', '#702eda']
]

export default defineComponent({
	name: 'set-theme',
	props: {
		onSetTheme: {
			type: Function
		}
	},
	emits: ['setTheme'],
	setup(props, { emit }) {
		const theme = ref<string>()

		const setTheme = (t: string[]) => {
			theme.value = JSON.stringify(t)
			emit('setTheme', t)
		}

		return () => (
			<div class="colors">
				{themes.map((t) => (
					<span
						class="color"
						style={{ backgroundColor: t[0], borderColor: t[1] }}
						onClick={() => setTheme(t)}
					>
						<i
							v-show={theme.value === JSON.stringify(t)}
							style={{ backgroundColor: t[1] }}
						></i>
					</span>
				))}
			</div>
		)
	}
})
